<template>
  <div>
    <Form v-if="attr" ref="formValidate" :model="attr" :rules="ruleValidate" :label-width="80">
      <div>
        <div v-for="(item, key, index) in attr" :key="index">
          <!-- 开关 -->
          <div v-if="item.type === 'boolean'" class="attr-row">
            <FormItem :label="key" :prop="key" class="form-item" :class="item.value ? 'actived' : ''">
              <i-switch @on-change="updateAttr" v-model="item.value">
                <span slot="open">开</span>
                <span slot="close">关</span>
              </i-switch>
            </FormItem>
            <div class="tips">
              <Tooltip v-if="item.tips" :content="item.tips" placement="bottom-start">
                <Icon type="ios-help-circle" size="20" />
              </Tooltip>
            </div>
          </div>
          <!-- 文本输入框 -->
          <div v-if="item.type === 'text'" class="attr-row">
            <FormItem :label="key" :prop="key" class="form-item">
              <Input v-model="item.value" placeholder="请输入" @on-change="updateAttr"></Input>
            </FormItem>
            <div class="tips">
              <Tooltip v-if="item.tips" :content="item.tips" placement="bottom-start">
                <Icon type="ios-help-circle" size="20" />
              </Tooltip>
            </div>
          </div>

          <!-- 数字输入框 -->
          <div v-if="item.type === 'number'" class="attr-row">
            <FormItem :label="key" :prop="key" class="form-item" :class="item.value ? 'actived' : ''">
              <Input v-model="item.value" placeholder="输入数字" @on-change="updateAttr" type="number"></Input>
            </FormItem>
            <div class="tips">
              <Tooltip v-if="item.tips" :content="item.tips" placement="bottom-start">
                <Icon type="ios-help-circle" size="20" />
              </Tooltip>
            </div>
          </div>
          <!-- 滑块 -->
          <div v-if="item.type === 'slider'" class="attr-row">
            <FormItem :label="key" :prop="key" class="form-item">
              <Slider v-model="item.value" @on-change="updateAttr" style="width: 180px" show-input></Slider>
            </FormItem>
            <div class="tips">
              <Tooltip v-if="item.tips" :content="item.tips" placement="bottom-start">
                <Icon type="ios-help-circle" size="20" />
              </Tooltip>
            </div>
          </div>
          <!-- select（text）属性 -->
          <div v-if="item.type === 'selection'" class="attr-row">
            <FormItem :label="key" :prop="key" class="form-item" :class="item.value ? 'actived' : ''">
              <Select placeholder="请选择" clearable v-model="item.value" class="select-herder" @on-change="updateAttr">
                <Option v-for="(item1, index1) in item.items" :value="item1" :key="index1">
                  {{ item1 }}
                </Option>
              </Select>
            </FormItem>
            <div class="tips">
              <Tooltip v-if="item.tips" :content="item.tips" placement="bottom-start">
                <Icon type="ios-help-circle" size="20" />
              </Tooltip>
            </div>
          </div>
          <!-- 图标类型 -->
          <div v-if="item.type === 'iconSelect'" class="attr-row">
            <FormItem :label="key" :prop="key" class="form-item" :class="item.value ? 'actived' : ''">
              <Select
                placeholder="请选择"
                filterable
                clearable
                v-model="item.value"
                class="select-herder"
                @on-change="updateAttr"
              >
                <Option v-for="(item1, index1) in iconList" :label="item1" :value="item1" :key="index1">
                  <Icon :type="item1" :size="28" />
                  <span style="color: #ddd">{{ item1 }}</span>
                </Option>
              </Select>
            </FormItem>
            <div class="tips">
              <Tooltip v-if="item.tips" :content="item.tips" placement="bottom-start">
                <Icon type="ios-help-circle" size="20" />
              </Tooltip>
            </div>
          </div>
          <!-- 颜色类型 -->
          <div v-if="item.type === 'color'" class="attr-row">
            <FormItem :label="key" :prop="key" class="form-item" :class="item.value ? 'actived' : ''">
              <ColorPicker v-model="item.value" @on-change="updateAttr" />
            </FormItem>
            <div class="tips">
              <Tooltip v-if="item.tips" :content="item.tips" placement="bottom-start">
                <Icon type="ios-help-circle" size="20" />
              </Tooltip>
            </div>
          </div>

          <!-- 图标类型 -->
          <!-- <ioniconPicker v-if="item.type === 'iconSelect'" @change="updateAttr" v-model="item.value" :name="k" /> -->
        </div>
      </div>
    </Form>
    <div v-else class="tips">请先选中组件，再去配置属性</div>
    <!-- <div v-if="attr && false">
      <div v-for="(item, k, i) in attr" :key="i">
         标签型（label）属性 
        <div v-if="item.type === 'label'" class="mu-text-field-label">{{ item.value }}</div>

        图标型 (icon) 属性 Muse-UI专用
        <iconPicker v-if="item.type === 'icon'" @change="updateAttr" v-model="item.value" :name="k" />
        图标型 (iconSelect) 属性 iView-UI专用
        <ioniconPicker v-if="item.type === 'iconSelect'" @change="updateAttr" v-model="item.value" :name="k" />
        颜色型 (color) 属性
        <colorPicker v-if="item.type === 'color'" @change="updateAttr" v-model="item.value" :name="k" />
        子属性
        <subAttributes v-if="item.children" :keyOfAttr="k" :attributes="item.children" @update="subUpdate" />
      </div>
    </div> -->
  </div>
</template>
<script>
import iconPicker from '@/components/iconPicker.vue'
import colorPicker from '@/components/colorPicker.vue'
import ioniconPicker from '@/components/ioniconPicker.vue'
import iconList from './iconList' //图标数据
export default {
  name: 'subAttributes',
  data() {
    return {
      attr: {},
      ruleValidate: {
        name: [{ required: true, message: 'The name cannot be empty', trigger: 'blur' }],
        mail: [
          { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
          { type: 'email', message: 'Incorrect email format', trigger: 'blur' },
        ],
        city: [{ required: true, message: 'Please select the city', trigger: 'change' }],
        gender: [{ required: true, message: 'Please select gender', trigger: 'change' }],
        interest: [
          { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
          { type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' },
        ],
        date: [{ required: true, type: 'date', message: 'Please select the date', trigger: 'change' }],
        time: [{ required: true, type: 'string', message: 'Please select time', trigger: 'change' }],
        desc: [
          { required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
          { type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' },
        ],
      },
      iconList: iconList || [],
    }
  },
  props: {
    attributes: {
      type: Object,
      default: null,
    },
    keyOfAttr: {
      type: String,
      default: null,
    },
    // currentId: {
    //   type: String,
    //   default: '',
    // },
  },
  created() {
    this.attr = JSON.parse(JSON.stringify(this.attributes))
  },
  watch: {
    attributes: {
      deep: true,
      handler(val, oldVal) {
        this.attr = JSON.parse(JSON.stringify(val))
      },
    },
  },
  methods: {
    subUpdate(attr) {
      //收到了子组件的更新
      Object.assign(this.attr, attr)
      this.updateAttr()
    },
    updateAttr() {
      // 内置项至少要保存一个
      if (this.attr.itemNum && this.attr.itemNum.value) {
        if (Number(this.attr.itemNum.value) < 1) {
          this.attr.itemNum.value = '1'
        }
      }
      //提交更新到父组件
      if (this.keyOfAttr) {
        this.$emit('update', {
          [this.keyOfAttr]: {
            children: this.attr,
          },
        })
      } else this.$emit('update', this.attr)
    },
  },
  components: {
    iconPicker,
    colorPicker,
    ioniconPicker,
  },
}
</script>
<style lang="less" scoped>
.actived {
  /deep/.ivu-form-item-label {
    color: red;
  }
}

/deep/.ivu-form-item {
  margin-bottom: 0;
}
.attr-row {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;
  // justify-content: flex-end;
  .tips {
    width: 30px;
  }
  .form-item {
    width: 90%;
  }
  // display: inline-block;
  .select-herder {
    // width: 100%;
  }
}
.tips {
  text-align: center;
  color: #666;
}
</style>
